<template>
  <div>
    <div class="boxMain">
      <div class="login">
        <div class="pic">
          <img src="@/assets/logo1.jpg" alt />
        </div>
        <div class="form-floating mb-3 mt-3 ms-4">
          <input
            type="text"
            class="form-control"
            id="floatingInput"
            placeholder="name@example.com"
            v-model="username"
             @blur="modifyusername"
          />
          <label for="floatingInput">Username</label>
        </div>
        <div class="form-floating ms-4 mb-3">
          <input
            type="password"
            class="form-control"
            id="floatingPassword"
            placeholder="Password"
            v-model="password"
          />
          <label for="floatingPassword">Password</label>
        </div>
        <div class="form-floating ms-4">
          <input
            type="password"
            class="form-control"
            id="floatingPassword2"
            placeholder="Password"
            v-model="password2"
            @blur="modifypassword"
          />
          <label for="floatingPassword">Confirm password</label>
        </div>
        
        <button type="button" class="btn btn-danger btn-lg" @click="register">注册</button>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      username: "",
      password: "",
      password2: "",
      data: {}
    };
  },
  methods: {
    modifypassword() {
      if (this.password != this.password2) {
        alert("验证密码与密码不一致！");
      }
    },
     modifyusername() {
      if (this.username.length < 3) {
        alert("用户名需大于三个字符！");
      }
    },
    register() {
      if(this.username != '' && this.password != ''){
      axios.get('http://localhost:5000/user',{  //params参数必写 , 如果没有参数传{}也可以
      params: {  
       username: this.username,
       password:this.password
    }
    }).then(res => (
        console.log(res.data)
        )).catch(function (error) { // 请求失败处理
        console.log(error);
        });
      
      alert("注册成功!");
      this.$router.push({
        path: "/login"
      });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.boxMain {
  width: 100%;
  height: 690px;
  background-color: rgb(71, 82, 92);
  background: url("@/assets/car2.jpg") no-repeat;
  background-size: 100%;

  .login {
    width: 30%;
    height: 600px;
    float: right;
    margin: 30px;
    .pic {
      width: 90%;
      height: 300px;
      margin: auto;
      margin-top: 20px;
      img {
        height: 300px;
      }
    }
    input {
      width: 94%;
    }
    button {
      margin: 30px 40px;
      width: 200px;
    }
  }
}
</style>